<template>
  <div class="about">
    <ul>
      <li v-for="(item,index) in shoparr" :key="item.id">
        <input type="checkbox" @click="jisuanzong(item)" :checked="item.checkeda">
        <img :src="item.img" alt="">
        <p>{{item.name}}</p>
        <p>{{item.price * item.count | formatPrice}}</p>
        <button @click="add(index)">+</button>
        <p v-text="item.count">1</p>
        <button @click="reduce(index)">-</button>
        <button @click="del(index)">删除</button>
      </li>
    </ul>
    <input type="checkbox" @click="allchecks()" :checked="allcheck">全选
    <button @click="delall()">清理购物车</button>
    <h2>总计:{{zong | formatPrice}}</h2>
  </div>
</template>
<script>

</script>
<style scoped>
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  img {
    width: 100px;
    height: 100px;
  }

  p {
    margin: 0;
    padding: 0;
  }

  button {
    background-color: #f00;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
  }
</style>